<script lang="ts" setup>
import { toRefs } from "vue";
import MenuItem from "@/layouts/components/menu/MenuItem.vue";

const props = defineProps<{
  menuInfo: object;
}>();
const { menuInfo } = toRefs(props);
</script>

<template>
  <template v-if="!menuInfo.hidden">
    <a-sub-menu
      v-if="menuInfo.children?.length && menuInfo.menuType == 'M'"
      :key="menuInfo.path"
    >
      <template #title>
        <span style="display: flex; align-items: center">
          <JIcon
            v-if="menuInfo.meta.icon"
            :type="menuInfo.meta.icon"
            style="font-size: 20px"
          />
          <span>{{ menuInfo.meta.title }}</span>
        </span>
      </template>
      <template v-for="item in menuInfo.children" :key="item.path">
        <template v-if="!item.children">
          <MenuItem :menu-info="item" />
        </template>
        <template v-else>
          <SubItem :key="item.path" :menu-info="item" />
        </template>
      </template>
    </a-sub-menu>
    <template v-else>
      <MenuItem :menu-info="menuInfo" />
    </template>
  </template>
</template>
